<template>
  <a-range-picker
    v-bind="$attrs"
    v-on="$attrs"
    :showTime="showTime"
    :format="timeOptions.format"
    :valueFormat="timeOptions.valueFormat"
    :timePickerProps="timePickerOptions"
    :placeholder="placeholder"
    :allowClear="allowClear"
    :exchange-time="false"
    :trigger-props="{ updateAtScroll: true }"
    @select="pickerValueSelectFn"
    @change="pickerValueChangeFn"
  />
</template>

<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    placeholder: {
      type: Array,
      default: () => ['开始日期', '结束日期'],
    },
    popupContainer: {
      type: [String, Object],
      default: 'body',
    },
    showTime: Boolean,
    format: String,
    valueFormat: String,
    timePickerProps: Object,
    allowClear: {
      type: Boolean,
      default: true,
    },
  })

  const pickerValueSelectFn = () => {}
  const pickerValueChangeFn = () => {}

  // 时间配置
  const timeOptions = computed(() => {
    if (props.showTime) {
      return {
        format: 'YYYY-MM-DD HH:mm',
        valueFormat: 'YYYY-MM-DD HH:mm:00',
      }
    } else {
      return {
        format: props.format || 'YYYY-MM-DD',
        valueFormat: props.valueFormat || 'YYYY-MM-DD',
      }
    }
  })

  // 显示时间配置
  const timePickerOptions = computed(() => {
    if (props.showTime) {
      return {
        ...(props.timePickerProps || {}),
        format: 'HH:mm',
        defaultValue: ['00:00', '23:59'],
      }
    } else {
      if (props.timePickerProps) {
        return props.timePickerProps
      } else {
        return ''
      }
    }
  })
</script>
